<!-- PopupMenu.vue -->
<template>
    <div 
      class="popup-wrapper animate__animated animate__faster"
      :class="[show ? 'animate__zoomIn' : 'animate__zoomOut']"
      @click.self="handleClose"
      @animationend="onAnimationEnd"
    >
      <div 
        class="popup-menu"
        :style="positionStyle"
      >
        <div 
          v-for="(item, index) in items"
          :key="index"
          class="menu-item"
          @click="handleClick(item)"
        >
          <span class="text">{{ item.text }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, defineProps, defineEmits } from 'vue'
  
  const emit = defineEmits(['item-click', 'close'])
  
  const props = defineProps({
    items: {
      type: Array,
      required: true
    },
    position: {
      type: Object,
      required: true
    }
  })
  
  const show = ref(true)
  
  const positionStyle = computed(() => ({
    left: `${props.position.x}px`,
    top: `${props.position.y}px`
  }))
  
  const handleClick = (item) => {
    emit('item-click', item)
    show.value = false
  }
  
  const handleClose = () => {
    show.value = false
  }
  
  const onAnimationEnd = () => {
    if (!show.value) {
      emit('close')
    }
  }
  </script>
  
  <style lang="less">
  .popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1999;
  
    .popup-menu {
      position: absolute;
      transform: translate(-100%, -100%);
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 20px;
      background: linear-gradient(145deg, #ffffff, #f8f9fa);
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      min-width: 5rem;
      backdrop-filter: blur(8px);
  
      .menu-item {
        display: flex;
        justify-content: center;
        padding: 12px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 12px;
  
        .text {
          font-size: 14px;
          color: #606266;
          font-weight: 500;
          white-space: nowrap;
        }
  
        &:hover {
          background: rgba(0, 0, 0, 0.04);
          transform: translateX(4px);
        }
      }
    }
  }
  </style>